<template>
  <div>
    <el-radio-group
      v-model="suspendedData.tabActive"
      @change="handleRadioGroup"
    >
      <el-radio-button label="1">每轮统计</el-radio-button>
      <el-radio-button label="2">停赛总表</el-radio-button>
      <el-radio-button label="3">每队统计</el-radio-button>
    </el-radio-group>
    <div v-show="suspendedData.tabActive === '1'">
      <div class="filter-info">
        <div class="card-icon">
          <el-icon class="yellow-icon"><Tickets /></el-icon> <em>X</em>{{suspendedData.yellowCard}}
        </div>
        <div class="card-icon">
          <el-icon class="red-icon"><Tickets /></el-icon> <em>X</em>{{suspendedData.redCard}}
        </div>
        <el-select
          v-model="suspendedData.tab1Data.raceStageId"
          @change="handleChangeGroup"
          placeholder="请选择赛事阶段查询"
          clearable
        >
          <el-option
            v-for="group in suspendedData.tab1Data.groupOptions"
            :label="RaceStageTypeText[group.stageType]"
            :value="group.raceStageId"
          />
        </el-select>
        <el-select
          v-model="suspendedData.tab1Data.raceRound"
          placeholder="请选择轮次查询"
          clearable
        >
          <el-option
            v-for="team in suspendedData.tab1Data.teamOptions"
            :label="team.raceRoundName"
            :value="team.raceRound"
          />
        </el-select>
        <el-button type="primary" @click="getPlayerBoard('round')"
          >查询</el-button
        >
      </div>
      <el-table :data="suspendedData.tab1Data.tableData" border>
        <el-table-column label="序号" width="80">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="球队">
          <template #default="scope">
            <div class="team-name">
              <img :src="scope.row.teamLogo" alt="" />
              {{ scope.row.teamName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="球员">
          <template #default="scope">
            <div class="team-name">
              {{ scope.row.idName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="playerNumber" label="号码" />
        <el-table-column label="当前累计">
          <template #default="scope">
            <div class="cards">
              <div class="card-icon">
                <el-icon class="yellow-icon"><Tickets /></el-icon> <em>X</em
                >{{ scope.row.yellowCard }}
              </div>
              <div class="card-icon">
                <el-icon class="red-icon"><Tickets /></el-icon> <em>X</em
                >{{ scope.row.redCard }}
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="suspendedData.tabActive === '2'">
      <div class="tab2-top">
        <div>停赛统计 {{suspendedData.tab2Data.tableData.length}} 人</div>
        <el-button @click="handleDialogShow(1, '')">添加停赛球员</el-button>
      </div>
      <el-table :data="suspendedData.tab2Data.tableData" border>
        <el-table-column label="序号" width="80">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="球队">
          <template #default="scope">
            <div class="team-name">
              <img :src="scope.row.teamLogo" alt="" />
              {{ scope.row.teamName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="球员">
          <template #default="scope">
            <div class="team-name">
              {{ scope.row.idName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="playerNumber" label="号码" />
        <el-table-column prop="suspendRound" label="停赛轮次" />
        <el-table-column label="即将停赛轮次">
          <template #default="scope">
            <span> 下一轮 </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-icon :size="18" @click="handleDialogShow(2, scope.row)"
              ><Edit
            /></el-icon>
            <el-icon :size="18" @click="handleDelete(scope.row.raceSuspendId)"
              ><Delete
            /></el-icon>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="suspendedData.tabActive === '3'">
      <div class="tab3-top">
        <el-select
          v-model="suspendedData.tab3Data.teamId"
          placeholder="请选择球队查询"
          clearable
        >
          <el-option
            v-for="item in suspendedData.tab3Data.selectOptions"
            :key="item.teamId"
            :label="item.teamName"
            :value="item.teamId"
          />
        </el-select>
        <el-button class="ml10" type="primary" @click="getPlayerBoard('team')"
          >查询</el-button
        >
        <el-button class="ml10" @click="removeCard.dialogVisible = true"
          >清空球队黄牌</el-button
        >
      </div>
      <el-table :data="suspendedData.tab3Data.tableData" border>
        <el-table-column label="序号" width="80">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="球员">
          <template #default="scope">
            <div class="team-name">
              {{ scope.row.idName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="playerNumber" label="号码" />
        <el-table-column label="得牌情况">
          <template #default="scope">
            <div class="cards">
              <div class="card-icon">
                <el-icon class="yellow-icon"><Tickets /></el-icon> <em>X</em
                >{{ scope.row.yellowCard }}
              </div>
              <div class="card-icon">
                <el-icon class="red-icon"><Tickets /></el-icon> <em>X</em
                >{{ scope.row.redCard }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              @click="handleRemoveCurrentYellow(scope.row.teamPlayerId)"
              >清空黄牌</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 停赛设置 -->
    <el-dialog
      v-model="suspendedConfig.suspendedDialog"
      title="停赛设置"
      width="35%"
    >
      <el-form
        :model="suspendedConfig.suspendedForm"
        label-width="120px"
        class="suspended-form"
      >
        <el-form-item label="球队">
          <el-select
            v-model="suspendedConfig.suspendedForm.teamId"
            placeholder="请选择球队"
            @change="handleChangeTeam"
            :disabled="suspendedConfig.suspendedType === 2"
          >
            <el-option
              v-for="item in suspendedData.tab3Data.selectOptions"
              :key="item.teamId"
              :label="item.teamName"
              :value="item.teamId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="球员">
          <el-select
            v-model="suspendedConfig.suspendedForm.teamPlayerId"
            placeholder="请选择球员"
            :disabled="suspendedConfig.suspendedType === 2"
          >
            <el-option
              v-for="item in suspendedData.tab3Data.menberOptions"
              :key="item.teamPlayerId"
              :label="item.idName"
              :value="item.teamPlayerId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="停赛场次">
          <el-input-number
            v-model="suspendedConfig.suspendedForm.suspendRound"
            :min="1"
            :max="50"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="suspendedConfig.suspendedDialog = false"
            >取消</el-button
          >
          <el-button type="primary" @click="submitSuspendeBtn">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 清空黄牌 -->
    <el-dialog
      v-model="removeCard.dialogVisible"
      title="选择清空黄牌球队"
      width="30%"
    >
      <el-checkbox
        v-model="removeCard.checkAll"
        :indeterminate="removeCard.isIndeterminate"
        @change="handleCheckAllChange"
        >全选</el-checkbox
      >
      <el-checkbox-group
        v-model="removeCard.checkedGroup"
        @change="handleCheckedChange"
      >
        <el-checkbox
          v-for="item in suspendedData.tab3Data.selectOptions"
          :key="item.teamId"
          :label="item.teamId"
        >
          {{ item.teamName }}
        </el-checkbox>
      </el-checkbox-group>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="removeCard.dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitCheckBtn"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  postClearCardPlayer,
  postClearCardTeam,
  getRaceStageMapping,
  getRaceTeamMapping,
  getRacePlayerBoard,
  getRaceSuspendBoard,
  postSaveTeamPlayer,
  postUpdateTeamPlayer,
  postDelTeamPlayer,
} from "@/api/match";
import { useRoute } from "vue-router";
import { RaceStageTypeText } from "../../../../config/index";

const route = useRoute();
const raceId = ref(0); // 当前赛事的id
const suspendedData = reactive({
  tabActive: "1",
  yellowCard: 0,
  redCard: 0,
  tab1Data: {
    raceStageId: "",
    raceRound: "",
    groupOptions: [],
    teamOptions: [],
    tableData: [],
  },
  tab2Data: {
    tableData: [],
  },
  tab3Data: {
    teamId: "",
    selectOptions: [],
    menberOptions: [],
    tableData: [],
  },
});

// 停赛设置
const suspendedConfig = reactive({
  suspendedDialog: false,
  suspendedType: 1,
  suspendedForm: {
    teamId: "",
    teamPlayerId: "",
    suspendRound: 1,
  },
});

// 清空黄牌弹框
const removeCard = reactive({
  dialogVisible: false,
  checkAll: false,
  isIndeterminate: true,
  checkedGroup: [],
});
// tab 切换
const handleRadioGroup = async (value: string) => {
  suspendedData.tabActive = value;
  if (value === "1") {
    await getPlayerBoard("round");
  } else if (value === "2") {
    await getSuspendBoard();
  } else if (value === "3") {
    await getPlayerBoard("team");
  }
};
// 每轮统计 - 赛事选择
const handleChangeGroup = (value: Number) => {
  suspendedData.tab1Data.groupOptions.map((item: any) => {
    if (value === item.raceStageId) {
      suspendedData.tab1Data.teamOptions = item.roundInfoList;
    }
  });
  suspendedData.tab1Data.raceRound = "";
};
// 停赛设置 - 球队
const handleChangeTeam = (value: Number) => {
  suspendedData.tab3Data.selectOptions.map((item: any) => {
    if (value === item.teamId) {
      suspendedData.tab3Data.menberOptions = item.teamPlayerList;
    }
  });
};

// 停赛设置 - 添加/更新
const handleDialogShow = (type: number, params: any) => {
  if (type === 1) {
    // 添加
    suspendedConfig.suspendedForm = { ...params };
    suspendedConfig.suspendedForm.suspendRound = 1;
  } else {
    // 编辑
    suspendedConfig.suspendedForm = { ...params };
    handleChangeTeam(params.teamId);
  }
  suspendedConfig.suspendedDialog = true;
  suspendedConfig.suspendedType = type;
};

// 停赛设置 - 添加/更新提交按钮
const submitSuspendeBtn = async () => {
  if (suspendedConfig.suspendedType === 1) {
    await postSaveTeamPlayer({
      ...suspendedConfig.suspendedForm,
      raceId: raceId.value,
    }).then((res) => {
      ElMessage({
        type: "success",
        message: res.msg,
      });
    });
  } else {
    await postUpdateTeamPlayer({
      ...suspendedConfig.suspendedForm,
    }).then((res) => {
      ElMessage({
        type: "success",
        message: res.msg,
      });
    });
  }
  suspendedConfig.suspendedDialog = false;
  await getSuspendBoard();
};

// 停赛设置 - 删除
const handleDelete = (id: Number) => {
  ElMessageBox.confirm("是否删除该球员的停赛记录？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      postDelTeamPlayer({ raceSuspendId: id }).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        getSuspendBoard();
      });
    })
    .catch((error) => {});
};

// 清空某位球员黄牌
const handleRemoveCurrentYellow = (id: Number) => {
  ElMessageBox.confirm("是否清空该球员黄牌？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      postClearCardPlayer({ teamPlayerId: id }).then((res) => {
        ElMessage({
          type: "success",
          message: "操作成功",
        });
        getPlayerBoard("team");
      });
    })
    .catch((error) => {});
};

// 选择清空黄牌-全选
const handleCheckAllChange = (val: boolean) => {
  let arr: any;
  suspendedData.tab3Data.selectOptions.map((i: any) => arr.push(i.teamId));
  removeCard.checkedGroup = val ? arr : [];
  removeCard.isIndeterminate = false;
};

// 选择清空黄牌
const handleCheckedChange = (value: string[]) => {
  const checkedCount = value.length;
  removeCard.checkAll =
    checkedCount === suspendedData.tab3Data.selectOptions.length;
  removeCard.isIndeterminate =
    checkedCount > 0 &&
    checkedCount < suspendedData.tab3Data.selectOptions.length;
};

// 清空黄牌球队 - 添加/更新提交按钮
const submitCheckBtn = async () => {
  await postClearCardTeam({
    teamIdList: removeCard.checkedGroup,
  }).then((res) => {
    ElMessage({
      type: "success",
      message: res.msg,
    });
    removeCard.dialogVisible = false;
    getPlayerBoard("team");
  });
};
// 查询赛事阶段和赛事轮次映射关系
const getStageMapping = async () => {
  getRaceStageMapping({ raceId: raceId.value }).then((res) => {
    suspendedData.tab1Data.groupOptions = res.data;
    suspendedData.tab1Data.teamOptions = res.data[0].roundInfoList;
  });
};
// 查询球队和球员映射关系
const getTeamMapping = async () => {
  getRaceTeamMapping({ raceId: raceId.value }).then((res) => {
    suspendedData.tab3Data.selectOptions = res.data;
  });
};
// 查询红黄牌统计 - 每轮统计/每队统计
const getPlayerBoard = async (type: string) => {
  getRacePlayerBoard({
    raceId: raceId.value,
    raceStageId: type === "round" ? suspendedData.tab1Data.raceStageId : "",
    raceRound: type === "round" ? suspendedData.tab1Data.raceRound : "",
    teamId: type === "team" ? suspendedData.tab3Data.teamId : "",
  }).then((res) => {
    type === "round"
      ? (suspendedData.tab1Data.tableData = res.data.teamPlayerSuspendInfoList,
        suspendedData.yellowCard = res.data.totalYellowCard,
        suspendedData.redCard = res.data.totalRedCard)
      : (suspendedData.tab3Data.tableData = res.data.teamPlayerSuspendInfoList);
  });
};
// 查询停赛总榜
const getSuspendBoard = async () => {
  getRaceSuspendBoard({ raceId: raceId.value }).then((res) => {
    suspendedData.tab2Data.tableData = res.data;
  });
};
onMounted(async () => {
  let { id } = route.query;
  raceId.value = Number(id);
  await getStageMapping();
  await getTeamMapping();
  await getPlayerBoard("round");
  await getSuspendBoard();
});
</script>
<style lang="scss" scoped>
.team-name {
  display: flex;
  align-items: center;
  img {
    width: 20px;
    margin-right: 5px;
  }
}
.filter-info {
  display: flex;
  align-items: center;
  margin: 10px 0;
  :deep(.el-select) {
    margin-right: 10px;
  }
}
.cards {
  display: flex;
  align-items: center;
}
.card-icon {
  display: flex;
  align-items: center;
  margin-right: 10px;
  :deep(.el-icon) {
    font-size: 22px;
    margin-right: 3px;
  }
  em {
    margin-right: 2px;
  }
  .yellow-icon {
    color: #d7d701;
  }
  .red-icon {
    color: red;
  }
}

.tab2-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}
.tab3-top {
  margin: 10px 0;
}
:deep(.el-icon + .el-icon) {
  margin: 0 4px;
}
.specify-link {
  color: #409eff;
  border-bottom: 1px solid #409eff;
  cursor: pointer;
}
.suspended-form {
  :deep(.el-select) {
    width: 100%;
  }
}
</style>